<!-- sign_up -->
<template>
  <div class="container a-container" id="a-container">
    <el-form ref="signformRef" :model="signform" :rules="signRules" class="form" id="a-form" method="" action="">
      <h2 class="form_title title">Create Account</h2>
      <div class="form__icons">
        <img class="form__icon" src=" ">
        <img class="form__icon" src=" ">
        <img src="">
      </div>
      <span class="form__span">or use email for registration</span>

      <el-form-item prop="userName">
        <el-input class="signInput" type="text" placeholder="Name" v-model="signform.userName"/>
      </el-form-item>
      <el-form-item prop="userEmail">
       <el-input class="signInput" type="text" placeholder="Email" v-model="signform.userEmail"/>
      </el-form-item>
      <el-form-item prop="userPassword">
        <el-input class="signInput" type="password" placeholder="Password" v-model.lazy="signform.userPassword"/>
      </el-form-item>
      <button type="button" class="form__button button submit" @click="sign_up">SIGN UP</button>
    </el-form>
  </div>
</template>
<style scoped>
@import '../assets/Login.css';
/* 将源码中的css样式单独存放,在各组件中导入就可以。*/
</style>

<script setup lang="ts">
import { ref, onMounted,reactive} from 'vue'
import useEmitter from '../hooks/useEmitter.js'
import {ElMessage} from "element-plus";
import axios from "axios";
import store from '../store/index.js'

const emitter = useEmitter()
onMounted(() => {
  emitter.on('change', (isOpen : boolean) => {
    watch: {
      isOpen:{
        let aContainer = document.querySelector("#a-container") as any;
        aContainer.classList.toggle("is-txl");

        //b中样式
        // let bContainer = document.querySelector("#b-container") as any;
        // bContainer.classList.toggle("is-txl");
        // bContainer.classList.toggle("is-z200");
      }
    }
  })
})

//定义用户注册字段
const signform=reactive({
  userName:"",
  userEmail:"",
  userPassword:""
})

//登陆注册规则
// 验证邮箱的规则
const checkEmail = (rule, value, callback) => {
  // 邮箱正则表达式
  const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
  if (regEmail.test(value)) {
    // True 合法的邮箱
    return callback()
  }
  callback(new Error('请输入合法的邮箱'))
}

const signRules= {
  userName:[
    {required:true,message:'请输入账号',trigger:'blur'},
    {min:6,max:10,message: 'Length should be 6 to 10',trigger:'blur'}
  ],
  userEmail:[
    {required:true,message:'请输入邮箱',trigger:'blur'},
    {
      validator: checkEmail,
      trigger: 'blur'
    },
  ],
  userPassword:[
    {required:true,message:'请输入密码',trigger:'blur'},
    {min:6,max:14,message: '长度在6到14个字符',trigger:'blur'},
  ]
}
const signformRef=ref(null)
//注册提交表单 通过axios将用户注册信息返回后端处理
function sign_up(){
  signformRef.value.validate((valid)=>{
    console.log(valid)
    if(valid){
      console.log(valid)
      //axios传递用户账号密码邮箱数据
      let api=store.state.dbApi
      let userData={
        userName:signform.userName,
        password:signform.userPassword,
        uerEmail:signform.userEmail
      };
      axios.post(api+'/register',userData).then(result=>{
        console.log(result.data)
        //结果转化为bool型变量
        if(Boolean(result.data))
        {
          ElMessage.success('注册成功！请登录')
        }else{
          ElMessage.error('注册失败！该用户已存在')
        }

      })
    }else {
      console.log(signformRef.value)
      ElMessage.error('注册失败,请输入用户名、邮箱、密码！')
      return false
    }
  })
}

</script>